<template>
  <div class="app-container app-container-compactness">
    <el-form ref="queryForm" size="mini" :model="queryParams" :inline="true" label-width="68px" :label-position="'left'">
<!--      <el-form-item label="托盘码" prop="tray_id">-->
<!--        <el-input-->
<!--          v-model="queryParams.tray_id"-->
<!--          placeholder="请输入托盘码"-->
<!--          clearable-->
<!--          size="small"-->
<!--        />-->
<!--      </el-form-item>-->
      <el-form-item label="商品名称" prop="goods_name">
        <el-input
          v-model="queryParams.goods_name"
          placeholder="请输入商品名称"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="所属仓库" prop="split_status">
        <el-select v-model="queryParams.entrepot_name" placeholder="请选择">
          <el-option
            v-for="item in selectData"
            :key="item.config_id"
            :label="item.name"
            :value="item.name"
          />
        </el-select>
      </el-form-item>
      <!--      <el-form-item label="拆分状态" prop="split_status">-->
      <!--        <el-select v-model="queryParams.split_status" placeholder="请选择拆分状态" clearable size="small">-->
      <!--          <el-option label="未拆分" value="0" />-->
      <!--          <el-option label="已拆分" value="1" />-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <el-form-item label="出库状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择出库状态" clearable size="small">
          <el-option label="未出库" value="0" />
          <el-option label="全部出库" value="1" />
          <el-option label="部分出库" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="货物状态" prop="goods_status">
        <el-select v-model="queryParams.goods_status" placeholder="请选择货物状态" clearable size="small">
          <el-option label="Good" value="Good" />
<!--          <el-option label="NG" value="NG" />-->
<!--          <el-option label="Hold" value="Hold" />-->
        </el-select>
      </el-form-item>
      <el-form-item label="库位号" prop="goods_name">
        <el-input
          v-model="queryParams.config_name"
          placeholder="请输入库位号"
          clearable
          size="small"
        />
      </el-form-item>
<!--      <el-form-item label="发票号" prop="customer_business_number">-->
<!--        <el-input-->
<!--          v-model="queryParams.customer_business_number"-->
<!--          placeholder="请输入发票号"-->
<!--          clearable-->
<!--          size="small"-->
<!--        />-->
<!--      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row>
      <el-col :span="1.5">
        <el-col>
          <el-button
            type="primary"
            plain
            icon="el-icon-upload2"
            size="mini"
            @click="exportStock"
          >库存导出
          </el-button>
        </el-col>
      </el-col>

      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-upload2"
          size="mini"
          :disabled="!selectionList.length"
          @click="batchEdit"
        >批量修改状态
        </el-button>
      </el-col>

      <el-row type="flex" justify="end">
        <el-popover placement="bottom" width="50" trigger="click">
          <el-checkbox-group v-model="checkedTableColumns" @change="checkedChange">
            <el-checkbox
              v-for="(item, index) in colTableHeaderTit"
              :key="index"
              :label="item.label"
            >{{ item.label }}</el-checkbox>
          </el-checkbox-group>
          <el-button
            slot="reference"
            type="primary"
            style="margin-right: 10px"
            @click="aaa"
          >设置显示字段
          </el-button>
        </el-popover>
      </el-row>

    </el-row>

    <el-table
      ref="table1"
      v-loading="loading"
      size="mini"
      :data="list"
      row-key="id"
      border
      fit
      highlight-current-row
      @sort-change="sortChange"
      @selection-change="handleSelectionChange"
    >

      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="仓库编号">
              <span>{{ props.row.stock_id }}</span>
            </el-form-item>
            <el-form-item label="入库编号">
              <span>{{ props.row.warehousing_id }}</span>
            </el-form-item>
            <el-form-item label="入库明细编号">
              <span>{{ props.row.warehousing_son_id }}</span>
            </el-form-item>
            <el-form-item label="托盘码">
              <span>{{ props.row.tray_id }}</span>
            </el-form-item>
            <el-form-item label="托盘数">
              <span>{{ props.row.tray_number }}</span>
            </el-form-item>
            <el-form-item label="库位编号">
              <span>{{ props.row.config_id }}</span>
            </el-form-item>
            <el-form-item label="项目id">
              <span>{{ props.row.project_id }}</span>
            </el-form-item>
            <el-form-item label="委托方ID">
              <span>{{ props.row.project_client }}</span>
            </el-form-item>
            <el-form-item label="制造商名称">
              <span>{{ props.row.manufacturer_name }}</span>
            </el-form-item>
            <el-form-item label="商品编号">
              <span>{{ props.row.goods_id }}</span>
            </el-form-item>
            <el-form-item label="商品中文名称">
              <span>{{ props.row.goods_Cname }}</span>
            </el-form-item>
            <el-form-item label="商品英文名称">
              <span>{{ props.row.goods_Ename }}</span>
            </el-form-item>

            <el-form-item label="商品料号体系">
              <span>{{ props.row.item_number_system }}</span>
            </el-form-item>

            <!--            <el-form-item label="供应商编号">-->
            <!--              <span>{{ props.row.supplier_id }}</span>-->
            <!--            </el-form-item>-->
            <el-form-item label="供应商名称">
              <span>{{ props.row.supplier_name }}</span>
            </el-form-item>
            <!--            <el-form-item label="制造商编号">-->
            <!--              <span>{{ props.row.manufacturer_id }}</span>-->
            <!--            </el-form-item>-->
            <el-form-item label="制造商名称">
              <span>{{ props.row.manufacturer_name }}</span>
            </el-form-item>
            <el-form-item label="包装编号">
              <span>{{ props.row.packing_id }}</span>
            </el-form-item>
            <el-form-item label="包装条形码">
              <span>{{ props.row.p_barcode }}</span>
            </el-form-item>
            <el-form-item label="包装数量/单位">
              <span>{{ props.row.packing_num +'/'+ props.row.unit_name }}</span>
            </el-form-item>
            <!--            <el-form-item label="入库发票号">-->
            <!--              <span>{{ props.row.customer_business_number }}</span>-->
            <!--            </el-form-item>-->
            <el-form-item label="创建时间">
              <span>{{ props.row.created_at }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column type="selection" width="50" align="center" />

      <el-table-column
        v-for="(item, index) in bindTableColumns"
        :key="`colTableHeaderTit_${index}`"
        class-name="allowDrag"
        show-overflow-tooltip
        :prop="tableHeaderTit[index].field"
        :label="tableHeaderTit[index].label"
        align="center"
      />

      <!--      <el-table-column prop="project_name" label="委托方名称" align="center" width="90" :show-overflow-tooltip="true" />-->
      <!-- :label="item.label"
        :prop="item.prop" -->

      <!--      <el-table-column prop="goods_name" label="商品名称" align="center" :show-overflow-tooltip="true" />-->
      <!--      <el-table-column prop="number" label="数量" align="center" />-->
      <!--      <el-table-column prop="box_number" label="箱数" align="center" />-->
      <!--      <el-table-column prop="name" label="库位名称" align="center" />-->
      <!--      <el-table-column prop="created_at" label="入库时间" align="center" :show-overflow-tooltip="true" />-->
      <!--      <el-table-column prop="customer_business_number" label="入库发票号" align="center" :show-overflow-tooltip="true" />-->
      <!--      <el-table-column prop="item_number_system" label="料号体系" align="center" :show-overflow-tooltip="true" />-->
      <!--      <el-table-column prop="Good_Qty" label="Good_Qty" align="center" width="90" />-->
      <!--      <el-table-column prop="Hold_Qty" label="Hold_Qty" align="center" />-->
      <!--      <el-table-column prop="NG_Qty" label="NG_Qty" align="center" />-->
      <!--      <el-table-column prop="out_number" label="出库数量" align="center" />-->

      <!--      <el-table-column prop="status" label="拆分状态" align="center">-->
      <!--        <template v-slot="scope">-->
      <!--          <span v-if="scope.row.split_status === '0'">未拆分</span>-->
      <!--          <span v-else-if="scope.row.split_status === '1'">已拆分</span>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <!--      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="250">-->
      <!--        <template slot-scope="scope">-->
      <!--          <el-dropdown v-show="scope.row.status != '1'" v-action="'stock@statusEdit'" @command="statusClick">-->
      <!--            <el-button type="primary" size="small">-->
      <!--              修改状态<i class="el-icon-arrow-down el-icon&#45;&#45;right" />-->
      <!--            </el-button>-->
      <!--            <el-dropdown-menu slot="dropdown">-->
      <!--              <el-dropdown-item :command="beforeHandleCommand(scope.row,'Good')">Good</el-dropdown-item>-->
      <!--              <el-dropdown-item :command="beforeHandleCommand(scope.row,'NG')">NG</el-dropdown-item>-->
      <!--              <el-dropdown-item :command="beforeHandleCommand(scope.row,'Hold')">Hold</el-dropdown-item>-->
      <!--            </el-dropdown-menu>-->
      <!--          </el-dropdown>-->

      <!--          <el-button-->
      <!--            size="small"-->
      <!--            type="success"-->
      <!--            style="margin-left: 10px;"-->
      <!--            @click="up_tray(scope.row)"-->
      <!--          >修改托盘-->
      <!--          </el-button>-->

      <!--          <el-button-->
      <!--            v-if="scope.row.split_status === '1'"-->
      <!--            v-action="'box@index'"-->
      <!--            size="mini"-->
      <!--            type="info"-->
      <!--            @click="box(scope.row,1)"-->
      <!--          >详情-->
      <!--          </el-button>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.limit" @pagination="getList" />

    <el-dialog title="修改托盘" :visible.sync="opens" width="30%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="托盘码">
          <el-input v-model="form.tray_id" style="width: 80%;" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="opens = false">关 闭</el-button>
      </span>
    </el-dialog>

    <el-dialog title="批量修改状态" :visible.sync="editOpen" width="30%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-radio v-model="editStatus" label="1" border>Good</el-radio>
<!--        <el-radio v-model="editStatus" label="2" border>NG</el-radio>-->
<!--        <el-radio v-model="editStatus" label="3" border>Hold</el-radio>-->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitEdit">提交</el-button>
        <el-button @click="editOpen = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { stockList, exportStock, statusEdit, att, upTray, batchStatusEdit } from '@/api/stock'
import Sortable from 'sortablejs'
export default {
  name: 'StockStock',
  data() {
    return {
      // 动态列数组
      tableHeaderTit: [
        { label: '商品名称', field: 'goods_name', minWidth: 50, isShow: true },
        { label: '数量', field: 'number', minWidth: 50, isShow: true },
        // { label: '箱数', field: 'box_number', minWidth: 50, isShow: true },
        { label: '库位名称', field: 'name', minWidth: 50, isShow: true },
        { label: '入库时间', field: 'created_at', minWidth: 50, isShow: true },
        // { label: '入库发票号', field: 'customer_business_number', minWidth: 50, isShow: true },
        { label: '料号体系', field: 'item_number_system', minWidth: 50, isShow: true },
        { label: '库存数量', field: 'Good_Qty', minWidth: 50, isShow: true },
        // { label: 'Hold_Qty', field: 'Hold_Qty', minWidth: 50, isShow: true },
        // { label: 'NG_Qty', field: 'NG_Qty', minWidth: 50, isShow: true },
        // { label: 'LOT1', field: 'LOT1', minWidth: 50, isShow: true },
        // { label: 'LOT2', field: 'LOT2', minWidth: 50, isShow: true },
        // { label: 'LOT3', field: 'LOT3', minWidth: 50, isShow: true },
        { label: '出库数量', field: 'out_number', minWidth: 50, isShow: true },
        { label: '出库状态', field: 'statusStr', minWidth: 50, isShow: true }
      ],
      // 拖拽列
      colTableHeaderTit: [
        { label: '商品名称', field: 'goods_name', minWidth: 50, isShow: true },
        { label: '数量', field: 'number', minWidth: 50, isShow: true },
        // { label: '箱数', field: 'box_number', minWidth: 50, isShow: true },
        { label: '库位名称', field: 'name', minWidth: 50, isShow: true },
        { label: '入库时间', field: 'created_at', minWidth: 50, isShow: true },
        // { label: '入库发票号', field: 'customer_business_number', minWidth: 50, isShow: true },
        // { label: '料号体系', field: 'item_number_system', minWidth: 50, isShow: true },
        { label: '库存数量', field: 'Good_Qty', minWidth: 50, isShow: true },
        // { label: 'Hold_Qty', field: 'Hold_Qty', minWidth: 50, isShow: true },
        // { label: 'NG_Qty', field: 'NG_Qty', minWidth: 50, isShow: true },
        // { label: 'LOT1', field: 'LOT1', minWidth: 50, isShow: true },
        // { label: 'LOT2', field: 'LOT2', minWidth: 50, isShow: true },
        // { label: 'LOT3', field: 'LOT3', minWidth: 50, isShow: true },
        { label: '出库数量', field: 'out_number', minWidth: 50, isShow: true },
        { label: '出库状态', field: 'statusStr', minWidth: 50, isShow: true }
      ],
      // 遮罩层
      loading: true,
      open: false,
      opens: false,
      title: '',
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      form: {},
      selectData: [],
      selectionList: [],
      ids: [],
      // 查询参数
      queryParams: {
        page: 1,
        limit: 20,
        goods_name: undefined,
        status: undefined,
        split_status: undefined,
        tray_id: undefined,
        entrepot_name: undefined,
        config_name: undefined
      },
      nimabi: false,
      editOpen: false,
      editStatus: '1',
      data: { ids: [], status: '' }
    }
  },
  computed: {
    bindTableColumns() { // 表格展示的字段
      const res = this.colTableHeaderTit.filter((v) => {
        return v.isShow == true
      })
      this.tableHeaderTit = JSON.parse(JSON.stringify(res))
      return res
    },
    // bindTableColumns: {
    //   get() {
    //     return this.dropCol.filter((v) => {
    //       return v.isShow == true
    //     })
    //   },
    //   set(value) {
    //
    //   }
    // },
    checkedTableColumns: {
      get() {
        return this.bindTableColumns.map((v) => v.label)
      },
      set(value) {
        this.nimabi = false
        this.colTableHeaderTit.forEach((v) => {
          if (value.includes(v.label)) {
            v.isShow = true
          } else {
            v.isShow = false
          }
        })

        // this.tableHeaderTit.forEach((v) => {
        //   if (value.includes(v.label)) {
        //     v.isShow = true
        //   } else {
        //     v.isShow = false
        //   }
        // })
      }
    }
  },
  created() {
    this.getList()
    this.getLocation()
  },
  mounted() {
    // 阻止表格默认行为，用于实现拖拽
    document.body.ondrop = function(event) {
      event.preventDefault()
      event.stopPropagation()
    }
    this.columnDrop(this.dropCol)
    // console.log(this.colList)
    // this.dropCol = colDrap(this.dropCol)
  },
  methods: {
    sortChange({ column, prop, order }) {
      this.queryParams.field_order = {}
      const field = prop
      const ord = order

      if (ord == null) {
        delete this.queryParams.field_order
      } else if (ord == 'descending') {
        this.queryParams.field_order[field] = 'desc'
      } else {
        this.queryParams.field_order[field] = 'asc'
      }
      this.getList()
    },
    checkedChange() {
      // console.log(this.dropCol)
    },
    submitEdit() {
      if (this.editStatus === '1') {
        this.data.status = 'Good'
      } else if (this.editStatus === '2') {
        this.data.status = 'NG'
      } else if (this.editStatus === '3') {
        this.data.status = 'Hold'
      }
      batchStatusEdit(this.data).then(response => {
        if (response.code === 10000) {
          this.$message.success(response.message)
          this.editOpen = false
          this.getList()
        } else {
          this.$message.error(response.message)
        }
      })
    },
    batchEdit() {
      if (this.selectionList.length === 0) {
        this.$message.warning('请选择要修改的数据')
        return false
      }
      this.data = { ids: [], status: '' }
      this.selectionList.forEach(item => {
        this.data.ids.push(item.id)
      })
      this.editOpen = true
    },
    /** 选中的项 */
    handleSelectionChange(selection) {
      this.selectionList = selection
    },
    up_tray(row) {
      this.opens = true
      this.form = row
    },
    // 列拖拽
    columnDrop() {
      // 获取dom节点
      this.nimabi = true
      var _this = this
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
      this.sortable = Sortable.create(wrapperTr, {
        draggable: '.allowDrag',
        animation: 180,
        // filter: '.el-table_1_column_1,.el-table_1_column_2',
        delay: 0,
        onUpdate: function(evt) {
          // 修改items数据顺序
          var newIndex = evt.newIndex
          var oldIndex = evt.oldIndex
          const newItem = wrapperTr.children[newIndex]
          const oldItem = wrapperTr.children[oldIndex]

          // 先删除移动的节点
          wrapperTr.removeChild(newItem)
          // 再插入移动的节点到原有节点，还原了移动的操作
          if (newIndex > oldIndex) {
            wrapperTr.insertBefore(newItem, oldItem)
          } else {
            wrapperTr.insertBefore(newItem, oldItem.nextSibling)
          }
          // 更新items数组(index-1是第一列有一个多选列不支持拖拽,否则会有排序错乱的问题)
          var item = _this.tableHeaderTit.splice(oldIndex - 2, 1)
          _this.tableHeaderTit.splice(newIndex - 2, 0, item[0])
        } // onEnd: (evt) => {
        //   const oldItem = this.dropCol[evt.oldIndex - 1]
        //   dropCol.splice(evt.oldIndex - 1, 1)
        //   dropCol.splice(evt.newIndex - 1, 0, oldItem)
        //   console.log(this.colList)
        // }
      })
      // return dropCol
    },
    submitForm() {
      var info = { tray_id: this.form.tray_id, stock_id: this.form.stock_id }
      const that = this
      upTray(info).then(response => {
        if (response.code === 10000) {
          that.$message.success(response.message)
          that.opens = false
          that.getList()
        } else {
          that.$message.error(response.message)
        }
      })
    },
    /** 查询库位 */
    getLocation() {
      const that = this
      att().then(response => {
        if (response.code === 10000) {
          that.selectData = JSON.parse(JSON.stringify(response.data))
          // that.selectList(that.selectData)
        }
      })
    },
    /** 改状态 */
    statusClick(command) {
      // console.log(command)
      const that = this
      that.loading = true
      statusEdit({ id: command.row.id, status: command.command }).then(response => {
        that.loading = false
        if (response.code === 10000) {
          that.$message.success(response.message)
          that.getList()
        } else {
          that.$message.error(response.message)
        }
      })
    },
    beforeHandleCommand(row, command) {
      return {
        'row': row,
        'command': command
      }
    },
    /** 导出订单列表 */
    exportStock() {
      const that = this
      that.loading = true
      let params = {}
      // exportType 1:选中导出 2：列表导出
      if (that.ids.length > 0) {
        params.ids = that.ids.toString()
      } else {
        params = that.queryParams
      }

      exportStock(params).then(response => {
        // console.log(response)
        if (response.code === 10000) {
          var url = response.data.url.replace('127.0.0.1:8080', 'cross.qekj.net')
          window.open(url)
        } else {
          that.$message.error(response.message)
        }
        that.loading = false
      })
    },
    aaa() {
      console.log(this.colList)
      console.log(this.dropCol)
    },
    /** 查询列表 */
    getList() {
      const that = this
      this.loading = true
      stockList(this.queryParams).then(response => {
        console.log(response)
        if (response.code === 10000) {
          if (response.data.length > 0) {
            response.data.forEach(item => {
              if (item.status == '0') { item['statusStr'] = '未出库' }
              if (item.status == '1') { item['statusStr'] = '全部出库' }
              if (item.status == '2') { item['statusStr'] = '部分出库' }
            })
          }
          that.list = response.data
          that.total = response.count
          that.loading = false
        }
      })
    },
    /** 新增按钮操作 */
    handleAdd() {

    },
    /** 编辑按钮操作 */
    handleEdit(row) {

    },
    /** 删除按钮操作 */
    handleDel(row) {

    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        page: 1,
        limit: 20,
        goods_name: undefined,
        status: undefined,
        split_status: undefined,
        tray_id: undefined,
        goods_status: undefined,
        customer_business_number: undefined
      }
      this.handleQuery()
    },
    /** 拆托盘 */
    box(row, type) {
      const that = this
      if (type === 2) {
        that.$confirm('确认拆托盘吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function() {
          that.loading = true
          that.$router.push({
            path: '/stock/box',
            query: { tray_id: row.tray_id }
          })
        }).catch(() => {
        })
      } else {
        that.$router.push({
          path: '/stock/box',
          query: { tray_id: row.tray_id }
        })
      }
    },
    /** 按钮显示判断 */
    isShow(row) {
      if (row.split_status === '0') {
        if (row.status > 0) {
          return false
        } else {
          return true
        }
      } else if (row.split_status === '1') {
        return false
      }
    }
  }
}
</script>
<style lang="less" scoped>

</style>
